<template>
  <div id="login">
    <div class="box" :class="{flip:state.bool}">
      <p v-show="!state.boolinput" class="reje">正在登录中....</p>
      <!-- <p class="reje">正在登录中....</p> -->
      <h2 v-show="state.boolinput">爱小厨后台管理系统</h2>
      <div class="username user" v-show="state.boolinput">
        <p>用户名:</p>
        <input type="text" v-model="state.username" />
      </div>
      <div class="pass user" v-show="state.boolinput">
        <p>密码:</p>
        <input type="password" v-model="state.pass" />
      </div>
      <button class="dlu" @click="addclass" v-show="state.boolinput">登录</button>
    </div>
  </div>
</template>
<script lang="ts">
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { reactive } from "vue";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      bool: false,
      boolinput: true,
      username: "",
      pass: "",
    });
    function addclass() {
      if (state.username !== "" && state.pass !== "") {
        state.bool = !state.bool;
        state.boolinput = !state.boolinput;
        axios(
          `http://120.76.246.120:4455/Sapi/super?username=${state.username}&password=${state.pass}`,
          {
            method: "GET",
          }
        ).then((res) => {
          console.log(res.data);
          if (res.data === 200) {
            // 登录成功
            setTimeout(() => {
              state.bool = !state.bool;
              state.boolinput = !state.boolinput;
              ElMessage({
                message: "登录成功",
                type: "success",
              });
              sessionStorage.setItem("username", state.username);
              sessionStorage.setItem("password", state.pass);
              // 跳转dao主页
              router.push({
                name: "lin",
              });
            }, 2000);
          } else {
            // 账号或密码错误
            setTimeout(() => {
              state.bool = !state.bool;
              state.boolinput = !state.boolinput;
              ElMessage.error("账号或密码错误");
            }, 5000);
          }
        });
      } else {
        ElMessage({
          message: "请输入用户名或密码",
          type: "warning",
        });
      }
    }
    return {
      state,
      addclass,
    };
  },
};
</script>

<style lang="scss" scoped>
@keyframes move {
  0% {
    width: 340px;
    height: 350px;
    margin: 130px auto 0;
    border-radius: 8px;
  }
  30% {
    width: 200px;
    height: 200px;
    margin: 200px auto 0;
    border-radius: 50%;
  }
  100% {
    width: 200px;
    height: 200px;
    margin: 200px auto 0;
    border-radius: 50%;
  }
}
#login {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right top, #e9c7da, #e2c3de, #d8c0e1, #cbbee5, #bcbde8, #b1c3ee, #a6c8f3, #9acef5, #96dbfa, #96e7fc, #9bf2fb, #a7fdf8);
  overflow: hidden;
  .box {
    width: 340px;
    height: 350px;
    margin: 130px auto 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 30px 0 0 0;
    box-shadow: 0 0 3px 1px #fff;
    background-image: linear-gradient(to right top, #e9c7da, #e2c3de, #d8c0e1, #cbbee5, #bcbde8, #b1c3ee, #a6c8f3, #9acef5, #96dbfa, #96e7fc, #9bf2fb, #a7fdf8);
    > h2 {
      color: #fff;
      margin: 20px 0;
      text-align: center;
    }
    >p{
      color: #fff;
    }
    .user {
      width: 100%;
      height: 50px;
      // background-color: pink;
      margin: 15px 0;
      display: flex;
      padding-left: 15px;
      > p {
        width: 60px;
        height: 100%;
        line-height: 50px;
        color: #fff;
      }
      > input {
        width: 220px;
        height: 30px;
        margin-top: 10px;
        outline: none;
        font-size: 18px;
        padding-left: 5px;
        border: none;
        outline: none;
      }
    }
    .dlu {
      display: block;
      margin: 0 auto;
      font-weight: 550;
      font-size: 18px;
      width: 90px;
      height: 40px;
      letter-spacing: 5px;
      text-align: center;
      line-height: 30px;
      border-radius: 3px;
      cursor: pointer;
      border: 0;
      transition: all 0.5s;
      &:hover {
        background-image: linear-gradient(to right top, #e9c7da, #e2c3de, #d8c0e1, #cbbee5, #bcbde8, #b1c3ee, #a6c8f3, #9acef5, #96dbfa, #96e7fc, #9bf2fb, #a7fdf8);
        color: white;
      }
    }
  }
  .flip {
    // infinite
    animation: move 5s 0.5s 1;
  }
  .reje {
    text-align: center;
    line-height: 150px;
    font-size: 18px;
    color: white;
  }
}
</style>